<script setup>
//数据
import {useRouter} from "vue-router";

const iconList = [
  { imgName: "超市", desc: "超市便利" },
  { imgName: "菜市场", desc: "菜市场" },
  { imgName: "水果店", desc: "水果店" },
  { imgName: "鲜花", desc: "鲜花绿植" },
  { imgName: "医药健康", desc: "医药健康" },
  { imgName: "家居", desc: "家居时尚" },
  { imgName: "蛋糕", desc: "烘培蛋糕" },
  { imgName: "签到", desc: "签到" },
  { imgName: "大牌免运", desc: "大牌免运" },
  { imgName: "红包", desc: "红包套餐" }
]
const router = useRouter();
const to = () => {
  router.push({
    name:'address'
  })
}
</script>

<template>
  <!-- 定位 -->
  <div class="position">
    <span class="iconfont position_icon" @click.prevent="to">&#xe619;</span>
    <span class="position_name" @click.prevent="to">北京理工大学国防科技园2号楼10层</span>
    <span class="iconfont position_notice">&#xe7e5;</span>
  </div>
  <!-- 搜索 -->
  <div class="search">
    <span class="iconfont">&#xe632;</span>
    <span class="search_text">山姆会员商店优惠商品</span>
  </div>
  <!-- banner -->
  <div class="banner">
    <img src="http://www.dell-lee.com/imgs/vue3/banner.jpg" alt="" class="banner_img">
  </div>
  <!-- 图标列表 -->
  <div class="icon_list">
    <div class="icon_item" v-for="(item, index) in iconList">
      <img class="icon_item_img" :src="'http://www.dell-lee.com/imgs/vue3/'+item.imgName+'.png'" :alt="item.imgName">
      <p class="icon_item_desc">{{ item.desc }}</p>
    </div>
  </div>
  <!-- 分割线 -->
  <div class="gap"></div>
</template>

<style lang="scss" scoped>
@import '@/style/mixins.scss';
@import '@/style/viriables.scss';

//定位
.position {
  position: relative;
  display: flex;
  align-items: center;
  line-height: .22rem;
  font-size: .16rem;
  padding: .16rem .24rem .16rem 0;

  .position_icon {
    font-size: .2rem;
  }
  &_name {
    @include ellipse;
    margin-left: .08rem;
    color: $content-fontcolor;
  }
  .position_notice {
    position: absolute;
    right: 0;
    font-size: .2rem;
  }
}

//搜索
.search {
  margin-bottom: .16rem;
  padding-left: .16rem;
  line-height: .32rem;
  background-color: #F5F5F5;
  border-radius: .16rem;

  &_text {
    margin-left: .12rem;
    font-size: .14rem;
    font-family: PingFangSC-Regular;
    color: #B7B7B7;
  }
}

//banner
.banner {
  &_img {
    width: 100%;
  }
}

//图标列表
.icon_list {
  display: flex;
  flex-wrap: wrap;
  margin-top: .16rem;

  .icon_item {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;

    &_img {
      width: .4rem;
      height: .4rem;
    }
    &_desc {
      margin: .06rem 0 .16rem 0;
    }
  }
}

//分割线
.gap {
  height: .1rem;
  background-color: #F1F1F1;
  margin: 0 -0.18rem;
}
</style>